<template>
    <div class="Addcard">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">添加银行卡</p>
        </Top>
        <!--form-->
        <div class="add-form">
            <h3>请绑定持卡人本人的银行卡</h3>
            <!--项列表-->
            <ul class="list">
                <!---->
                <li class="clearfix">
                    <span class="name">银行名称</span>
                    <input 
                           @click="getBankList"
                           type="text" 
                           placeholder="选择银行名称" 
                           v-model="bank_name" 
                           readonly />
                </li>
                <!---->
                <li class="clearfix">
                    <span class="name">银行所在地</span>
                    <input type="text" placeholder="请输入银行所在地" v-model="bank_address" />
                </li>
                <!---->
                <li class="clearfix">
                    <span class="name">开户行</span>
                    <input type="text" placeholder="请输入开户行名称" v-model="account_name" />
                    <p class="tip">若无法确定开户行全称，可致电银行客服。</p>
                </li>
                <!---->
                <li class="clearfix">
                    <span class="name">银行卡号</span>
                    <input type="number" placeholder="请输入银行卡号" v-model="bank_no" />
                </li>
                <!---->
                <li class="clearfix">
                    <span class="name">持卡人</span>
                    <input type="text" placeholder="请输入持卡人姓名" v-model="bank_user" />
                </li>
                <!---->
                <li class="clearfix">
                    <span class="name">手机号</span>
                    <input 
                           oninput="if(value.length>11)value=value.slice(0,11)"
                           type="number"
                           placeholder="请输入银行预留手机号码" 
                           v-model="mobile" />
                </li>
                <!---->
                <li class="clearfix codeBox">
                    <span class="name">验证码</span>
                    <input type="text" placeholder="请输入验证码" v-model="code" />
                    <span v-if="codeReady" class="reqBtn" @click="requsetCode">获取验证码</span>
                    <span v-else class="reqBtn">重新发送（ {{codeTime}}s ）</span>
                </li>
            </ul>
            <p class="safe">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-anquanbaozhang"></use></svg>
                账户安全保护中，请放心使用
            </p>
            <!--按钮-->
            <div class="addBtn">
                <el-button 
                           @click="confirm"
                           type="primary"
                           :loading="regBtnState">同意协议并绑卡</el-button>
            </div>
        </div>
        <!--选择银行弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="maskShow" v-loading="loading">
                <!--       公共顶部-->
                <Top>
                    <i class="el-icon-arrow-left back" slot="leftPart" @click="maskShow=false"></i>
                    <p class="title" slot="midPart">选择银行</p>
                </Top>
                <!--列表-->
                <ul class="cardWindow" v-if="list.length>0">
                    <li class="clearfix animated flipInX"
                        :style="{animationDelay:delay(index,true)}"
                        v-for="(item,index) in list"
                        :key="index"
                        @click="chooseCard(item,index)">
                        <img :src="item.logo" alt="">
                        <div class="info">{{item.name}}</div>
                        <i class="el-icon-check check animated bounceIn" v-if="index===checkIndex"></i>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Addcard',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                list:[],//列表
                checkIndex:-1,//默认选中

                codeReady:true,//验证码按钮状态
                codeTime:60,//验证码时效
                regBtnState:false,//提交按钮状态

                /*银行卡弹窗*/
                maskShow:false,//显示状态

                /*表单*/
                bank_name:'',//银行名

                bank_address:'',//银行所在地
                account_name:'',//开户行
                bank_no:'',//银行卡号
                bank_user:'',//持卡人
                bank_code:'',//银行编码
                mobile:'',//手机号
                code:'',//验证码
            }
        },
        methods:{ 
            //调起弹窗并获取银行列表 method=flower.pub.banklist
            getBankList(){
                this.maskShow = true;
                this.loading = true;
                this.Posthttp('/?method=flower.pub.banklist',{},(res)=>{
                    this.loading = false;
                    if(JSON.parse(res.bodyText).status == 1){
                        this.list = JSON.parse(res.bodyText).data.bank;
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                }); 
            },
            //选择银行
            chooseCard(item,index){
                this.checkIndex = index;
                this.bank_name = item.name;
                this.bank_code = item.code;
                this.maskShow = false;
            },
            //获取验证码
            requsetCode(){
                if(!this.codeReady)return;
                //ajax
                this.Posthttp('/?method=flower.pub.sendBankSms',{mobile:this.mobile},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.codeReady = false;
                        this.$message.success('发送成功！');
                        this.codeTimer();
                    }else{
                        this.codeReady = true;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //验证码时效倒计时
            codeTimer(){
                let timer = setInterval(()=>{ 
                    if(this.codeTime<2){
                        this.codeReady = true;
                        this.codeTime=60;//重新复原时效
                        clearInterval(timer);
                    }else{
                        this.codeTime--;
                    }
                }, 1000);  
            },
            //确定
            confirm(){
                //提交前验证
                if(!this.bank_address||!this.account_name||!this.bank_no||!this.bank_user||!this.bank_code||!this.mobile||!this.code){
                    this.$message.warning('请完善表单！亲~');
                    return;   
                }
                this.regBtnState=true;
                //ajax
                this.Posthttp('/?method=flower.user.addBank',{
                    member_id:this.getMemberId(),
                    bank_code:this.bank_code,
                    bank_no:this.bank_no,
                    account_name:this.account_name,
                    bank_address:this.bank_address,
                    bank_user:this.bank_user,
                    bank_mobile:this.mobile,
                    code:this.code,
                },(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.regBtnState = false;
                        this.$message.success('绑定成功~~');
                        this.$router.replace('/bag/cash');
                    }else{
                        this.regBtnState = false;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Addcard{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #f2f2f2;
        /*form*/
        .add-form{
            h3{
                height: .8rem;
                line-height: .8rem;
                padding: 0 .2rem;
            }
            .list{
                background-color: #fff;
                li{
                    padding: .3rem 0;
                    color: #222;
                    border-bottom: 1px solid #e4e4e4;
                    overflow: hidden;
                    position: relative;
                    .name{
                        width: 22%;
                        float: left;
                        text-align: right;
                        font-weight: 600;
                    }  
                    input{
                        width: 78%;
                        height: 100%;
                        outline: none;
                        border: 0;
                        padding: 0 .4rem;
                        font-size: .24rem;
                    }
                    .tip{
                        width: 100%;
                        padding:.2rem 0 0 22%;
                        color: #de6940;
                        text-indent: .4rem;
                        font-size: .18rem;
                    }
                    &.codeBox{
                        input{
                            padding-right: 3rem;
                        }
                    }
                    .reqBtn{
                        position: absolute;
                        right: .2rem;
                        top:calc(50% - .4rem);
                        height: .8rem;
                        line-height: .8rem;
                        color: #de6940;
                        font-size: .26rem;
                    }
                }
            }
            .safe{
                font-size: .26rem;
                color: #03a86e;
                padding: .2rem;
            }
        }
        /*弹窗*/
        .mask{
            background-color: #f5f5f5;
        }
        /**/
        .cardWindow{
            width: 100%;
            position: fixed;
            top: .8rem;
            bottom: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: .4rem;
            li{
                border-bottom: 1px solid #e4e4e4;
                position: relative;
                padding: .26rem .2rem;
                background-color: #fff;
                &:last-child{
                    border-bottom: 0;
                }
                img{
                    width: .66rem;
                    height: .66rem;
                    float: left;
                }
                .info{
                    margin-left: .66rem;
                    padding-left: .2rem;
                    line-height: .66rem;
                }
                .check{
                    color: #07a770;
                    font-size: .4rem;
                    position: absolute;
                    right: .2rem;
                    top: 50%;
                    top: calc(50% - .2rem);
                }
            }
        }
        /*按钮*/
        .addBtn{
            width: 100%;
            margin-top: 1rem;
            padding: 0 .2rem;
            button{
                width: 100%;
                height: .8rem;
                font-size: .28rem;
                letter-spacing: 1px;
                background: #de6940;
            }
        }
    }
</style>
